<!DOCTYPE html>
<head>
    <title>
       列表渲染 
    </title>
<script src="vue.js"></script>
</head>
<body>
<div id = "app">
    <ul>
        <li v-for="item,index in items" :key="index">
            {{ index }}
            {{ item.message }}
        </li>
    </ul>
    <ul>
        <li v-for="value,key in object" :key="key">
            {{ key }}:
            {{ value }}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : "#app",
        data : {
            items : [
                { message : 'foo' },
                { message : 'bar' },
                { message : 'axe' },
            ],
            object : {
                title : 'how to do lists in Vue',
                author : 'Jane Doe',
                publishedAt : '2016-04-10',
            } 
        },
        methods:{
        }
    })
</script>
<style type='text/css'>
    .test{color:cyan}
    .big{font-size:30px;}
    .active{background:red}
</style>
</body>
